<template>
  <div class="w-[100%] h-[100vh] bg-gray-50 p-[15px]">
    <div
      class="w-[100%] h-[80px] m-auto bg-white rounded-[10px] shadow flex items-center justify-between"
    >
      <!--左侧-->
      <div class="w-[80%] flex items-center">
        <var-image
          width="50px"
          height="50px"
          fit="cover"
          radius="50%"
          class="mx-[20px]"
          :src="state.userInfo.photo"
        />
        <div class="flex flex-col">
          <b>{{ state.userInfo.nick_name }}</b>
          <span class="text-gray-400 text-[12px] mt-[5px]">设置头像与昵称</span>
        </div>
      </div>
      <!--右侧-->
      <div class="mr-[20px]">
        <van-icon name="arrow" @click="openEditInfo" />
      </div>
    </div>
    <!-----------------------------------单元格------------------------------>
    <setting-cells></setting-cells>
    <!-----------------------------------单元格------------------------------>
    <van-button
      type="primary"
      class="shadow left-[50%] translate-x-[-50%]"
      color="#ffffff"
      style="
        width: 90%;
        position: fixed;
        bottom: 7%;
        border-radius: 10px;
        color: #9191f1;
      "
      @click="showPupFlag = true"
      block
    >
      退出登录
    </van-button>
    <var-dialog
      title="退出登录"
      message="你确定退出登录嘛！"
      v-model:show="showPupFlag"
      @confirm="outLogin"
    />
  </div>
</template>

<script setup lang="ts">
/** ------------------引入方法--------------------*/
import { onMounted, reactive, ref } from "vue";
/** ------------------引入方法--------------------*/
/** ------------------组件引入--------------------*/
import settingCells from "@/components/setting-cells/setting-cells.vue";
/** ------------------组件引入--------------------*/
/** -----------------API-------------------------*/
import { getUserInfo } from "@/api/usersApi";
/** -----------------API-------------------------*/

/**-----------------hooks------------------------*/
import useCommonhooks from "@/hooks/commonHooks/useCommonhooks";
import { Snackbar } from "@varlet/ui";
const { documentTitle } = useCommonhooks();
import { useRouter } from "vue-router";
const router = useRouter();
/** -----------------hooks------------------------*/

/**-----------------接口-------------------------*/
interface UserInfo {
  nick_name: string;
  photo: string;
  id: number;
  password: string;
  phone: string;
}
/** -----------------接口-------------------------*/
const state = reactive({
  userInfo: {} as UserInfo,
});
const showPupFlag = ref<boolean>(false); // 展示登录确认框
/**-------初始化数据-----------*/
const fetchData = async () => {
  try {
    const { code, data } = await getUserInfo({
      phone: localStorage.getItem("phone"),
    });
    if (code == 200) {
      state.userInfo = data[0];
    }
  } catch (e) {
    console.error(e);
  }
};
/** --------退出登录 ------*/
const outLogin = () => {
  localStorage.removeItem("token");
  localStorage.removeItem("phone");
  router.push({ path: "/login" });
  Snackbar.success("退出登录了");
};
const openEditInfo = () => {
  console.log(1111111111111);
  try {
    router.push({ path: "/setting/editSet" });
  } catch (e) {
    console.error(e);
  }
};
onMounted(async () => {
  await fetchData();
  documentTitle("系统设置");
});
</script>

<style lang="less" scoped></style>
